<template>
  <div class="box">
    <div style="flex: 1; width: 100%">
      <a-tabs
        type="card"
        :tabBarGutter="20"
        @change="tabChange"
        tab-position="top"
        :tabBarStyle="{
          backgroundColor: '#f5f6f9',
          border: 'none',
          height: '34px'
        }"
      >
        <!-- 先隐藏被申请人材料 -->
        <!-- <a-tab-pane v-if="category != Tp_category.accept" key="1" tab="被申请人材料" force-render> -->
        <a-tab-pane key="1" tab="被申请人材料" force-render>
          <ReplyCaseHandleProcedure
            :applyid="applyid"
            :busiKey="Tp_proctypeEnum.hear_reply.value"
            btnLabel="确认答复"
            :isEditModel="isEditModel"
          />
        </a-tab-pane>
        <a-tab-pane key="2" tab="第三人材料" force-render>
          <ThirdPersonMaterial :applyid="applyid" :isEditModel="isEditModel"></ThirdPersonMaterial>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype.js'
import { getCategoryType } from '@/utils/handlecase/tab_list.js'
import { Tp_categoryValue } from '@/enumeration/Tp_category.js'
export default {
  props: {
    applyid: {
      type: String,
      require: true
    },
    category: {
      type: String,
      require: true
    },
    isEditModel: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  components: {
    ThirdPersonMaterial: () => import('@/views/accept/material/ThirdPersonMaterial.vue'),
    LogMaterialwork: () => import('@/views/aprv/log_materials_view.vue'),
    ReplyCaseHandleProcedure: () => import('@/views/handleCase/reply/ReplyCaseHandleProcedure.vue')
  },
  data () {
    return {
      key: '1',
      // applyid: "1694568511539taNUfbf_RPwaqzV6hVFLr",
      Tp_proctypeEnum: Tp_proctypeEnum,
      Tp_category: Tp_categoryValue,
      categoryType: '' // 是否是受理阶段
    }
  },
  created () {
    // this.applyid = "1694568511539taNUfbf_RPwaqzV6hVFLr";
    this.categoryType = getCategoryType(this.category)
  },
  methods: {
    tabChange (val) {
      this.key = val
    }
  }
}
</script>

<style scoped lang="less">
.box {
  ::v-deep .ant-tabs-ink-bar {
    // margin: 0px 10%;
    width: 70px !important;
  }
  ::v-deep .ant-tabs-nav-container {
    height: 50px !important;
  }

  ::v-deep .ant-tabs-tab {
    background-color: rgba(240, 240, 240, 0.44) !important;
    color: #000000 !important;
    box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
    min-width: 140px !important;
    text-align: center;
    height: 50px !important;
    line-height: 50px !important;
  }
  ::v-deep .ant-tabs-tab-active {
    // background-color: #fff !important;
    color: #0072c6 !important;
  }
}
</style>
